<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片底色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <RichTextSetting :color.sync="config.color" :text.sync="config.text" @change="colorChange" />
    <el-form-item label="行距设置" class="mb-24">
      <el-select v-model="style.lineHeight" class="select mr-24">
        <el-option v-for="size in lineHeightOptions" :key="size" :value="size" :label="size"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文本样式" class="mb-24">
      <FontStyleSetting v-model="style" />
    </el-form-item>

    <BorderSetting v-model="model" class="mb-24" />
    <JumpSetting v-model="config" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  import FontStyleSetting from '@/views/productEdit/components/settingComponent/FontStyleSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';
  import RichTextSetting from '@/views/productEdit/components/settingComponent/RichTextSetting';
  export default {
    components: {
      ColorSetting,
      FontStyleSetting,
      JumpSetting,
      BorderSetting,
      RichTextSetting
    },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        lineHeightOptions: ['1.0', 1.2, 1.5, 1.8, '2.0', 2.5]
      };
    },
    computed: {
      ...mapGetters('component', ['previewer']),
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    methods: {
      colorChange(color) {
        this.config.color = color;
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep {
    .el-input--suffix {
      width: 100px;
    }

    .el-input .el-input__inner {
      text-align: center;
    }

    .w-e-toolbar {
      display: none;
    }

    .w-e-text-container {
      border-top: 1px solid #cecece !important;
    }

    // .w-e-text {
    //   p::selection {
    //     .w-e-toolbar {
    //       display: block;
    //     }
    //   }
    // }
  }
</style>
